import React from "react";
import { Spin, Table } from 'antd';
// import Table from 'components/resize-table'
import { EventUtils} from "share/common";
import "styles/data-center/report/graphic-report/report-table.scss";
const { PropTypes } = React;
import ReportWrapper from "components/template/graphic-report/report-wrapper";

const CELL_HEIGHT = 32;

@ReportWrapper
class ReportTable extends React.Component {
  deltaY = 0;

  state = {
    loading: false,//是否正在加载
    params: {},
    list: [],
    pagination: {
      page: 0,
      size: 20,
      hasMore: true
    },
    asyncColumns: []
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { onRef, reportKey, columnsFetch } = this.props;
    onRef && onRef({ ref: this, reportKey });
    if (columnsFetch) {
      columnsFetch().then(asyncColumns => {
        this.setState({
          asyncColumns
        })
      })
    }
  }

  fetchList = (params, reset = true) => {
    const { fetchMethod } = this.props;
    const { pagination, loading } = this.state;
    if (loading || (!pagination.hasMore && !reset)) return Promise.resolve();
    if (reset) {
      pagination.page = 0;
    }
    this.setState({
      loading: true,
      params
    });
    return fetchMethod(params, pagination).then((res) => {
      let { list } = this.state;
      const { data = [] } = res;
      if (reset) {
        list = [];
      }
      list.push(...data);
      pagination.page++;
      pagination.hasMore = data.length === pagination.size;
      this.setState({
        list,
        pagination,
        loading: false
      })
    }).catch(() => {
      this.setState({
        loading: false
      })
    })
  }

  handleScroll = (e) => {
    let { pagination, params, list } = this.state;
    e = EventUtils.getEvent(e);
    const { deltaY } = e.nativeEvent;

    if (this.deltaY <= 0 && deltaY <= 0) {
      this.deltaY = 0
    } else if (this.deltaY >= list.length * CELL_HEIGHT && deltaY >= 0) {
      this.deltaY = list.length * CELL_HEIGHT;
      e.stopPropagation();
    } else {
      this.deltaY += deltaY;
    }

    if (deltaY <= 0) {
      //向上滚动
    } else {
      const { page, size } = pagination;
      if (this.deltaY > page * size * CELL_HEIGHT - CELL_HEIGHT * 10) {
        this.fetchList(params, false);
      }
    }
  };

  render() {
    const { columns } = this.props;
    const { list, loading, asyncColumns } = this.state;
    const finalColumns = [].concat(columns, asyncColumns);
    return (
      <div className='report-table'>
        <div className="report-table-wrapper" onWheel={this.handleScroll}>
          <Spin spinning={loading}>
            <Table
              columns={finalColumns}
              size="small"
              bordered
              scroll={{ x: finalColumns.length * 100, y: CELL_HEIGHT * 10 }}
              dataSource={list}
              pagination={false}
            />
          </Spin>
        </div>
      </div>
    );
  }

  static propTypes = {
    onRef: PropTypes.func,
    reportKey: PropTypes.string,
    title: PropTypes.string,
    columns: PropTypes.array,
    fetchMethod: PropTypes.func,
  }

  static defaultProps = {
    onRef: () => {
    },
    fetchMethod: () => {
    },
    columns: []
  }
}


export default ReportTable;
